<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<meta name="viewport" id="viewport" content="width=device-width, initial-scale=1">
	<title>card</title>
	<style type="text/css">.infinite-scroll-preloader {margin-top:-20px;}</style>
	<link rel="stylesheet" href="http://g.alicdn.com/msui/sm/0.6.2/css/sm.css">
	<script type='text/javascript' src='http://g.alicdn.com/sj/lib/zepto/zepto.js' charset='utf-8'></script>
	<script type='text/javascript' src='http://g.alicdn.com/msui/sm/0.6.2/js/sm.js' charset='utf-8'></script>
	<script type="text/javascript" src="../js/utils.js"></script>
    <link rel="stylesheet" type="text/css" href="../css/filmplay.css">
    <link rel="stylesheet" type="text/css" href="../css/films.css">


</head>
<body>
	<div class="page-group" id="page-home">
		<!-- 单个page ,第一个.page默认被展示-->
		<div class="page">
			<header class="bar bar-nav" style="background:rgb(238,238,238);color:black">
				<h1 class="title">影  视</h1>
			</header>
			<!-- 添加 class infinite-scroll 和 data-distance向下无限滚动可不加infinite-scroll-bottom类，这里加上是为了和下面的向上无限滚动区分-->
			<div class="content infinite-scroll infinite-scroll-bottom" data-distance="100">
				<div class="list-block" style="margin:0">
					<ul class="list-container"></ul>
				</div>
				<!-- 加载提示符 -->
				<div class="infinite-scroll-preloader">
					<div class="preloader"></div>
				</div>
			</div>
		</div>
	</div>
	<script>$.init()</script>
	<script type="text/javascript">
		$(function() {
			// 加载flag
			var loading = false;
			// 最多可加载的条目
			var maxItems = 40;

			// 每次加载添加多少条目
			var itemsPerLoad = 8;

			function addItems(number, lastIndex) {
				// 生成新条目的HTML
				var html = '';
				AjaxIO.post("/getMarkJson",{},function(results){
					for (var i = lastIndex + 1; i <= lastIndex + number; i++) {
						result = results[i]
					//请求数据
					// AjaxIO()
					// html += '<li class="item-content"><div class="item-inner"><div class="item-title">Item ' + i + '</div></div></li>';
					//card 模板
					 
					html += '<li class="card" style="margin:0;background:rgb(244,246,247)"><div class="card-header" style="color: black;rgb(244,246,247);border:1px solid #eee;padding:0;">'+
					'<lable style="display: block;height: 35px;width: 100%;text-align: center;font-size: 18px;font-weight:550;color: black;line-height: 35px;">'+result.data.title+'</lable></div>'+

					'<div class="card-content" style="padding:0;"><img src='+result.data.imageUrl+' style="width: 100%;"></div>'+

					'<div class="card-footer" style="padding:0;">'+
					'<lable style="display: inline-block;margin-top: 15px;margin-bottom: 0;float: left;font-size: 16px;vertical-align: bottom;">'+result.data.type+'</lable>'+
					'<lable style="display: inline-block;margin-top: 15px;margin-bottom: 0;float: right;width: 80px;text-align: left;font-size: 14px;vertical-align: bottom;color:orange;">'+result.data.reading+'</lable>'+
					'</div></li>';
				}
					// 添加新条目
					
					$('.infinite-scroll-bottom .list-container').append(html);

				})
			}
			//预先加载20条
			addItems(itemsPerLoad, 0);

			// 上次加载的序号

			var lastIndex = 8;

			// 注册'infinite'事件处理函数
			$(document).on('infinite', '.infinite-scroll-bottom',function() {

				// 如果正在加载，则退出
				if (loading) return;

				// 设置flag
				loading = true;

				// 模拟1s的加载过程
				setTimeout(function() {
					// 重置加载flag
					loading = false;

					if (lastIndex >= maxItems) {
						// 加载完毕，则注销无限加载事件，以防不必要的加载
						$.detachInfiniteScroll($('.infinite-scroll'));
						// 删除加载提示符
						$('.infinite-scroll-preloader').remove();
						return;
					}

					// 添加新条目
					addItems(itemsPerLoad, lastIndex);
					// 更新最后加载的序号
					lastIndex += 8;
					//容器发生改变,如果是js滚动，需要刷新滚动
					$.refreshScroller();
				}, 1000);
			});


			$(".card").live('click', function() {
                // alert("运行了"
                var index = $(this).index() + 1
                localStorage.setItem("index",index+"");
                $.router.load("markDetailView.html");  //加载ajax页面

            });
		})
	</script>
	<script>
		$(document).on("pageInit", "#page-home", function(e, pageId, $page) {
			try{
				responesToPhone("false")				
			} catch(error){
				console.log("捕捉到错误")
			}
		})
	</script>
	<script type="text/javascript">
		$(document).on("pageInit", "#page-detailformark", function(e, pageId, $page) {
			var Mycollect = document.getElementById("Mycollect");
			var star = document.getElementById("star");
			var collect = document.getElementById("collect");
			var isClicked = false;
			Mycollect.onclick = function() {
				if (!isClicked) {
					collect.style.color = 'rgba(114,184,230,1)';
					isClicked = true;
				} else {
					collect.style.color = 'rgba(197,197,198,1)';
					isClicked = false;
				}
			}

			var username = $('#name').val();
			var password = $('#password').val();
			var index = localStorage.getItem("index")
			AjaxIO.post("/getMarkDetailJson", {
					index
				},
				function(result) {
					$('#image').attr("src", result.data.imageUrl);
					$('#Myfilm').html(result.data.title);
					$('#introduce').html(result.data.comment);

				});
			try{
				responesToPhone("true")				
			} catch(error){
				console.log("捕捉到错误")
			}

			$('#reading').click(function(argument) {
             	// $.router.load("markFilm.html")
             	var index = localStorage.getItem("index")
				AjaxIO.post("/getMarkDetailJson", {
						index
					},
					function(result) {
						responesToPhone(result.data.filmUrl)
					});


         	})

			$(document).on("pageInit", "#page-film", function(e, pageId, $page) {
				var Mycollect=document.getElementById("Mycollect");
	            var star=document.getElementById("star");
	            var collect=document.getElementById("collect");
	            var isClicked = false;
	            Mycollect.onclick=function () {
	                if (!isClicked) {
	                    collect.style.color = 'rgba(114,184,230,1)';
	                    isClicked=true;
	                }
	                else {
	                    collect.style.color = 'rgba(197,197,198,1)';
	                    isClicked=false;
	                }
	            }



				var index = localStorage.getItem("index")
				AjaxIO.post("/getMarkDetailJson", {
						index
					},
					function(result) {
						$('#FilmSource').attr("src", result.data.filmUrl);
						$('#FilmObject').attr("data", result.data.filmUrl);
						$('#FilmData').attr("src", result.data.filmUrl);
						$('#MyFilmplay').html(result.data.title);
					});

				var loading = false;
				// 最多可加载的条目
				var maxItems = 6;

				// 每次加载添加多少条目
				var itemsPerLoad = 3;

				function addItems(number, lastIndex) {
					var index = localStorage.getItem("index")
					AjaxIO.post("/getMarkDetailJson", {
						index
					}, function(result) {
						var html = '';
						for (var i = 0; i < 4 ; i++) {
							html += '<li class="ucercomment"> <div style="border-top: solid #dfe5ee 1px;margin-top:20px;"><label class="comment_name">' + '最好的你' + '</label><label class="comment_time">' + '17:25' + '</label><p class="comment_content">' + '这个电影真的太棒了！！！' + '</p></div></li>';
						}
						$('.infinite-scroll-bottom .list-container').append(html);

					})

				}
				//预先加载3条
				addItems(itemsPerLoad, 0);

				// 上次加载的序号

				var lastIndex = 3;

				// 注册'infinite'事件处理函数
				$(document).on('infinite', '.infinite-scroll-bottom', function() {

					// 如果正在加载，则退出
					if (loading) return;

					// 设置flag
					loading = true;

					// 模拟1s的加载过程
					setTimeout(function() {
						// 重置加载flag
						loading = false;

						if (lastIndex >= maxItems) {
							// 加载完毕，则注销无限加载事件，以防不必要的加载
							$.detachInfiniteScroll($('.infinite-scroll'));
							// 删除加载提示符
							$('.infinite-scroll-preloader').remove();
							return;
						}

						// 添加新条目
						addItems(itemsPerLoad, lastIndex);
						// 更新最后加载的序号
						lastIndex += 3;
						//容器发生改变,如果是js滚动，需要刷新滚动
						$.refreshScroller();
					}, 1000);
				});
			});
				
		});

		function responesToPhone(isSuccess) {
			// alert("运行了")
			window.webkit.messageHandlers.responesToPhone.postMessage(isSuccess);
		}

    </script>

	</script>
</body>
</html>